{{if $Category['Uploadfile']['banner']}}
<div>
	<portlet  portlet="notitle" title="banner slide" custom_class="nopadding">
	{{if !empty($Category['Uploadfile']['banner'])}}
		<div id="bannerCarousel" class="carousel slide" data-interval="3000">
		    <!-- Carousel items -->
		    <div class="carousel-inner">
		    	{{loop $Category['Uploadfile']['banner'] $key $file}}
					<div class="{{if $key==0}}active{{/if}} item">
					<img src="{{$this->Html->url($file['fspath'])}}">
					<div class="carousel-caption">
                      <h4>{{$file['name']}}</h4>
                    </div>
					</div>
				{{/loop}}
		    </div>
		    <!-- Carousel nav -->
		    <a class="carousel-control left" href="#bannerCarousel" data-slide="prev">&lsaquo;</a>
		    <a class="carousel-control right" href="#bannerCarousel" data-slide="next">&rsaquo;</a>
	    </div>
	{{/if}}
	</portlet>
</div>
{{/if}}

<?php  

if($Category['Category']['left']+1 == $Category['Category']['right']) {
	$cateLeftMenu = $this->Section->getLeftMenu('Category',array('parent_id'=> $Category['Category']['parent_id'],'selectedid'=>$current_cateid)); 
}
else{
	$cateLeftMenu = $this->Section->getLeftMenu('Category',array('parent_id'=> $Category['Category']['id'],'selectedid'=>$current_cateid)); 
}
$leftMenuText = trim(strip_tags($cateLeftMenu));
?>

<div class="container">	
	<div class="row">		
		<div class="{{if trim($leftMenuText)}}col-md-9{{else}}col-md-12{{/if}}" style="display: block;">
			<portlet portlet="default"  title="{{$Category['Category']['name']}}">
				<div class="Content-body clearfix">
				<?php echo $this->TplParse->executePortlet($Category['Category']['content']); ?>
				</div>
<?PHP if($total>0){ 
	$columns = $Category['Category']['columns'] ?   $Category['Category']['columns'] : 1;
	if(12%$columns == 0) {		
		$liclass = 'col-md-'.(12/$columns);
	}
	$region_control_name = Inflector::tableize($Category['Category']['model']);
?>
<ul class="clearfix ui-portlet-list">
    <?PHP 
foreach($Category['datalist'] as $item) {
		$item['slug'] = $item['slug']?$item['slug']:$item['id'];
    ?>	
		{{include $Category['Category']['template']}}			
	<?php } ?>
</ul>
	{{$page_navi}}
<?php } ?></portlet>
		</div>
		{{if $leftMenuText}}
		<div class="col-md-3">
			<portlet  title="{{$top_category_name}}">{{$cateLeftMenu}}</portlet>
		</div>
		{{/if}}
	</div>
</div>
<tplsection>

{{if strpos($Category['Category']['template'],'_masonry_photo')!==false}}
	{{$this->Html->script(array(
	            'jquery/jquery.masonry.min.js','jquery/jquery.infinitescroll.min.js',
	            'jquery/jquery.lazyload.js',            
	        ));
	}}
	
	<script>	
	$(function(){		 
		    var $container = $('#portlet-30 .portlet-content-list');  
		    $container.imagesLoaded( function(){
		      $container.masonry({
		        itemSelector: '.list-item-photo',
		        animate: true,       
		        animationOptions: {
		            duration: 400,
		            easing: 'linear',
		            queue: false
		        }
		      });
		    });
		
		  $container.infinitescroll({
		        bufferPx     : 200, //离分页底部还有bufferPx像素时就开始加载下一页的内容 ，设置大一些体验效果会好一些
			    loading : {img:"{{$this->Html->url('/img/ajax/loading.gif')}}",msgText:"正在加载新的图片...",finishedMsg:"亲，没有更多的啦。。。"},
			    animate: true,extraScrollPx:-200, // 回退一段，图片加载补上的缺位需要上移才能看到。
			    navSelector  : "div.pagelink", // selector for the paged navigation (it will be hidden)
			    nextSelector : "div.pagelink a:first",  // selector for the NEXT link (to page 2)
			    itemSelector : "#portlet-30 .list-item-photo"  // selector for all items you'll retrieve
		  	},
		    function(newElements) { // call masonry as a callback.
		        var $newElems = $(newElements);
	//	        $newElems.find('img.lazy').lazyload({
	//			            placeholder : BASEURL+"/img/grey.gif",
	//			            effect      : "fadeIn"                  
	//			        });
		        // ensure that images load before adding to masonry layout
		        // 每一个加载完后，即调用masonry；而不是等所有的都加载完后再调（时间长，影响体验，特别是在网速不够快的时候）
		        $newElems.css({ opacity: 0 }).each(function(){
		        	var $item = $(this);
		        	$item.imagesLoaded(function() {
		        		$item.animate({ opacity: 1 });
		                $container.masonry('appended', $item, true);
		                
		            });
		        });
		    });
		  
	});
	
	</script>
{{/if}}

</tplsection>
